import { observer } from "mobx-react";
import { Spin } from 'antd';
import loadjs from 'loadjs';
import {WeaLocaleProvider} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class DataAnalysis extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true
        }
    }
    componentDidMount() {
        this.loadEdcBoard();
    }

    loadEdcBoard() {
        const { store } = this.props;
        if (loadjs.isDefined('weaEdcBoard')) {
            store.setAnalysisLoaded(true);
            return;
        }
        const libUrl = '/spa/edc/static4engine/board4com/';
        loadjs([
            `${libUrl}index.css`,
            `${libUrl}index.js`,
            '/font/edc/board/iconfont.js',
            '/mobilemode/js/echarts4/echarts.min.js'
        ], 'weaEdcBoard', {
                success: () => {
                    store.setAnalysisLoaded(true);
                }
            });
    }
    renderSpinTip(spining, tip) {
        return (
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@3cp5de`}
                spining={spining}
                style={{ width: '100%', paddingTop: 200 }}
                tip={<div style={{ paddingTop: 10 }}>{tip}</div>}
            />
        );
    }
    render() {
        const { store } = this.props;

        if (store.loading || !store.analysisLoaded) {
            return this.renderSpinTip(true, getLabel('502288','正在加载分析面板, 请稍候...') );
        }

        const { BoardDetail } = window.weaEdcBoard.com;
        return (
            <div className="edc-data-analysis">
                <BoardDetail ecId={`${this && this.props && this.props.ecId || ''}_BoardDetail@59pnya`}
                    id={store.boardId}
                    preview={true}
                ></BoardDetail>
            </div>
        )
    }
}